<template>
    <div
        class="radio-button-group"
        :class="{
            'radio-button-group-line': props.line,
        }"
    >
        <div
            class="radio-button"
            :class="{ active: props.modelValue === item[props.valueName] }"
            v-for="item in props.list"
            :key="item[props.valueName]"
            @click="onActive(item[props.valueName])"
        >
            {{ item[props.keyName] }}
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    line: {
        type: Boolean,
        default: false,
    },
    modelValue: {
        type: [String, Number],
        default: 0,
    },
    list: {
        type: Array,
        default: () => [],
    },
    keyName: {
        type: String,
        default: "label",
    },
    valueName: {
        type: String,
        default: "value",
    },
});

const emits = defineEmits(["update:modelValue", "change"]);

const onActive = (value) => {
    emits("update:modelValue", value);
    emits("change", value);
};
</script>
<style lang="scss" scoped>
.radio-button-group {
    display: inline-flex;
    align-items: center;
    // background-color: #fff;
    // height: 40px;

    &-line {
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #5085fb;
        .radio-button {
            border-radius: 0 !important;
            margin-right: 0 !important;
            box-shadow: none !important;
            border-right: 1px solid #5085fb;

            &:last-of-type {
                border-right: 0;
            }
        }
    }

    .radio-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 34px;
        padding: 0 14px;
        font-size: 16px;
        border-radius: 6px;
        cursor: pointer;
        box-shadow: 0px 0px 10px 0px rgba(1, 23, 86, 0.1);
        margin-right: 14px;
        color: #5085fb;
        background-color: #fff;

        &.active {
            color: #fff;
            background-color: #5085fb;
            box-shadow: none;
        }
    }
}
</style>
